<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta name="referrer" content="no-referrer"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .laytable-cell-customization {
            text-align: center;
            height: auto !important;
            white-space: normal;
            overflow: visible;
            text-overflow: inherit;
            word-break: break-all;
        }

        .layui-table img {
            max-width: 300px;
        }

        .table-header-fixed {
            position: fixed;
            top: 0;
            z-index: 99
        }

    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="goodsName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">品牌</label>
                            <div class="layui-input-inline">
                                <input type="text" name="brand" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品分类</label>
                            <div class="layui-input-inline">
                                <select id="industry" lay-filter="industry"></select>
                            </div>
                            <div class="layui-input-inline">
                                <select id="classes" lay-filter="classes"></select>
                            </div>
                            <div class="layui-input-inline">
                                <select id="pin" lay-filter="pin"></select>
                            </div>
                            <input type="text" name="category" value="" hidden>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">所属商品库</label>
                            <div class="layui-input-inline">
                                <select name="goodsType" lay-filter="goodsType">
                                    <option value="">不限</option>
                                    <option value="SIGNED">品牌商品库</option>
                                    <option value="NINE_POINT_NINE_ZONE">9.9商品库</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品状态</label>
                            <div class="layui-input-inline">
                                <select name="status" lay-filter="status">
                                    <option value="">不限</option>
                                    <option value="已上架">已上架</option>
                                    <option value="已下架">待上架</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">添加时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="dateRange" id="dateRange" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-warn layui-btn-sm data-add-btn" lay-event="toTopic">加入活动</button>

            </div>
        </script>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="imgTemp">
            {{# if(d.goodsImages != "" && d.goodsImages != null){ }}
            <img src="{{d.goodsImages.split(',')[0]}}" style="width: 100%;height: 80px;"/>
            {{# } }}
        </script>

    </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/common/common.js" charset="utf-8"></script>
<script>
    let myClos = [];

    window.onload = function () {
        layui.use(['form', 'table'], function () {
            const $ = layui.jquery,
                table = layui.table;
            table.render({
                elem: '#currentTableId',
                url: '/goods/unactivity/list',
                method: 'POST',
                contentType: 'application/json',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    {type: "checkbox", fixed: 'left', style: 'height:94.5px;'},
                    {
                        field: 'numbering', title: '序号', align: 'center', width: 60, templet: function (d) {
                            return d.LAY_INDEX; //返回序号
                        }
                    },
                    {
                        field: 'goodsImages',
                        title: '商品图',
                        align: 'center',
                        templet: '#imgTemp',
                        style: 'height:80px;',
                        minWidth: 120
                    },
                    {
                        field: 'goodsName',
                        title: '商品名称',
                        align: 'center',
                    },
                    {field: 'brand', title: '品牌', align: 'center'},
                    {field: 'category', title: '商品分类', align: 'center'},
                    {field: 'specification', title: '规格', align: 'center'},
                    {field: 'goodsPrice', title: '市场价', align: 'center'},
                    {field: 'discountPrice', title: '玫丽价', align: 'center'},
                    {field: 'supplyPrice', title: '供货价', align: 'center'},
                    {field: 'customSales', title: '销量', align: 'center'},
                    {field: 'createTime', title: '添加时间', sort: true, align: 'center'}
                ]],
                limits: [50, 100, 150, 200, 250, 300],
                limit: 50,
                page: true,
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize'
                },
                response: { //定义后端 json 格式，详细参见官方文档
                    statusName: 'code', //状态字段名称
                    statusCode: '200', //状态字段成功值
                    msgName: 'msg', //消息字段
                    countName: 'total', //总数字段
                    dataName: 'rows' //数据字段
                },
                done: function (res, curr, count) {//表格渲染完成的回调函数
                    let headertop = $(".layui-table-header").offset().top//获取表头到文档顶部的距离
                    $(window).scroll(function () {//开始监听滚动条
                        if (headertop - $(window).scrollTop() < 0) {    //超过了
                            $(".layui-table-header").addClass('table-header-fixed')//添加样式，固定住表头
                        } else {//没超过
                            $(".layui-table-header").removeClass('table-header-fixed')//移除样式
                        }
                    })
                    // 给指定的列加上css样式
                    let colsList = this.cols[0];
                    myClos = colsList;
                    for (let cols of colsList) {
                        if (cols.field === 'goodsImages' || cols.title === '操作') {
                            // 添加样式
                            let classStr = ".laytable-cell-1-" + cols.key;
                            $(classStr).addClass('laytable-cell-customization')//
                        }
                    }
                }
            });
        });
    }

    layui.use(['form', 'table', 'laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#dateRange', //指定元素
            max: 0, // 限制最大值为当前日期
            type: 'date',
            range: true, //开启范围选择
        });

        // 监听表格排序事件
        table.on('sort(currentTableFilter)', function (obj) {
            for (let cols of myClos) {
                if (cols.field === 'goodsImages' || cols.title === '操作') {
                    // 添加样式
                    let classStr = ".laytable-cell-1-" + cols.key;
                    $(classStr).addClass('laytable-cell-customization')//
                }
            }
        });


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            let dataRangeList = data.field.dateRange.split(` - `)
            let dataRange = {}
            if (dataRangeList.length === 2) {
                dataRange = {
                    'startDate': dataRangeList[0],
                    'endDate': dataRangeList[1]
                }
            }
            data.field.dataRange = JSON.stringify(dataRange);
            if (!data.field.goodsType){
                delete data.field['goodsType'];
            }
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: data.field
            }, 'data');

            return false;
        });
        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'toTopic') {
                let checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus?.data;
                let idList = [];
                for (let i = 0; i < data.length; i++) {
                    idList.push(data[i]?.goodsId);
                }
                if (idList === void 0 || idList.length === 0) {
                    layer.msg("请至少选择一行数据");
                    return false;
                }

                layer.confirm('确定所选择的商品加入专题活动吗？', function (index) {
                    $.ajax({
                        type: "post",
                        url: '/goods/batch/copy',
                        data: JSON.stringify(idList),
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (req) {
                            layer.msg(req.msg);
                            layer.close(index);
                            setTimeout(function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                let parentWindow = window.parent;
                                parentWindow.reloadTable();
                            }, 1000);

                        },
                        error: function (e) {
                            layer.msg("操作失败");
                            layer.close(index);
                            setTimeout(function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                            }, 1000);
                        }
                    })
                });
            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });


    });


    //商品分类下拉框
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            $ = layui.jquery;
        let industryText = "";
        let classesText = "";
        let pinText = "";

        //异步加载下拉框数据
        $.get("/goods/category/list/root", {}, function (data) {
            if (data.code != 200) {
                layer.msg(data.msg)
            } else {
                let $html = '<option value="">请选择分类</option>';
                if (data.rows != null) {
                    $.each(data.rows, function (index, item) {
                        $html += "<option value='" + item.id + "'>" + item.category + "</option>";
                    });
                    $("#industry").append($html);
                    //append后必须从新渲染
                    form.render('select');
                }
            }
        });
        //监听行业下拉框
        form.on('select(industry)', function (dataObj) {
            //移除城市下拉框所有选项
            $("#classes").empty();
            let classesHtml = '<option value="">请选择类目</option>';
            $("#classes").html(classesHtml);
            $("#pin").empty();
            let pinHtml = '<option value="">请选择品类</option>';
            $("#pin").html(pinHtml);
            industryText = $("#industry").find("option:selected").text();
            let value = $("#industry").val();
            $('input[name="category"]').val(industryText);
            if (isNotNull(value)) {
                //异步加载下拉框数据
                $.get("/goods/category/list/" + value, function (data) {
                    if (data.code != 200) {
                        layer.msg(data.msg)
                    } else {
                        let $html = "";
                        if (data.rows != null) {
                            $.each(data.rows, function (index, item) {
                                $html += "<option value='" + item.id + "'>" + item.category + "</option>";
                            });
                            $("#classes").append($html);
                            //append后必须从新渲染
                            form.render('select');
                        }
                    }
                });
            } else {
                $('input[name="category"]').val("");
                form.render('select');
            }
        });
        //监听类目下拉框
        form.on('select(classes)', function (dataObj) {
            //移除县区下拉框所有选项
            $("#pin").empty();
            let html = '<option value="">请选择品类</option>';
            $("#pin").html(html);
            classesText = $("#classes").find("option:selected").text();
            let value = $("#classes").val();
            let category = industryText + "-" + classesText;
            $('input[name="category"]').val(category);
            //异步加载下拉框数据
            if (isNotNull(value)) {
                $.get("/goods/category/list/" + value, function (data) {
                    if (data.code != 200) {
                        layer.msg(data.msg)
                    } else {
                        let $html = "";
                        if (data.rows != null) {
                            $.each(data.rows, function (index, item) {
                                $html += "<option value='" + item.id + "'>" + item.category + "</option>";
                            });
                            $("#pin").append($html);
                            //append后必须从新渲染
                            form.render('select');
                        }
                    }
                });
            }
        });

        //监听品类下拉框
        form.on('select(pin)', function (dataObj) {
            pinText = $("#pin").find("option:selected").text();
            let category = industryText + "-" + classesText + "-" + pinText;
            if (!isNotNull($("#pin").val())) {
                category = industryText + "-" + classesText;
            }
            $('input[name="category"]').val(category);
        });

    });
</script>

</body>
</html>
